<template>
  <div>
    <div style="margin: 10px 0">
      <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>办公耗材消耗记录</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <h2>办公耗材消耗记录 <i class="el-icon-notebook-1"></i></h2>
    <el-divider></el-divider>
    <el-button type="primary" @click="handleAdd" class="mr-5">新增使用记录<i class="el-icon-circle-plus-outline"></i>
    </el-button>
    <div class="block">
      <el-timeline :reverse="true">
        <el-timeline-item v-for="usage in usages" :timestamp="usage.receiveDate" placement="top">
          <el-card>
            <el-button type="success" class="info"><i class="el-icon-view" @click="showInfo(repair)"></i>查看详情
            </el-button>
            <el-descriptions title="使用记录详情" direction="vertical" :column="3" border>
              <el-descriptions-item label="耗材编号">{{ usage.materialId }}</el-descriptions-item>
              <el-descriptions-item label="领取人">{{ usage.receiver }}</el-descriptions-item>
              <el-descriptions-item label="领取数量">{{ usage.receiveNum }}</el-descriptions-item>
              <el-descriptions-item label="领取时间">{{ usage.receiveDate }}</el-descriptions-item>
              <el-descriptions-item label="出库人">{{ usage.handler }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ usage.comment }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog title="新增使用记录" :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
      <h4>物料消耗</h4><br/>
      <el-form :model="usage" ref="usage"
               label-width="100px" class="demo-dynamic" :rules="rules">
        <el-form-item label="办公耗材" prop="vehicleId" label-width="100px">
          <el-select v-model="usage.materialId" placeholder="请选择办公耗材">
            <el-option
                v-for="item in officeMaterials"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领取人" label-width="100px" prop="receiver">
          <el-input v-model="usage.receiver" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="领取数量" label-width="100px" prop="receiceNum">
          <el-input v-model="usage.receiveNum" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="领取时间" label-width="100px" prop="receiveDate"><el-date-picker
            v-model="usage.receiveDate"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
        </el-form-item>
        <el-form-item label="出库人" label-width="100px" prop="handler">
          <el-input v-model="usage.handler" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" prop="driver">
          <el-input v-model="usage.comment" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="save('usage')">{{ btnText }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "OfficeUsage",
  data() {
    return {
      dialogFormVisible: false,
      usage: {},
      btnText: '',
      officeMaterials: [],
      usages: [],
      vehicleId: 0,
      address: '',
      rules: {},
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/officeMaterial/get").then(res => {
        this.officeMaterials = res.data
      })
      request.get("/officeMaterial/officeMaterialUsage").then(res => {
        this.usages = res.data
      })
    },
    handleAdd() {
      this.btnText = "添加"
      this.address = ''
      // this.vehicleRepair={}
      this.dialogFormVisible = true
    },
    showInfo(repair) {

    },
    materialChange(index) {
      console.log(index)
      // this.dynamicValidateForm.domains[index].max=stock
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
      });
    },
    handleChange(value) {
      console.log(value);
    },
    save(usage) {
      this.$refs[usage].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          request.post("officeMaterial/officeMaterialUsage", this.usage).then(res => {
            if (res.code===200) {
              this.$message.success("添加成功")
              this.load()
            } else {
              this.$message.error("添加失败")
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.block {
  margin-top: 30px;
  width: 80%;
}

.info {
  float: right;
  top: 10px;
  right: 20px;
  padding: 10px;
}
</style>